import NavHeader from "./components/NavHeader";
import PageFooter from "./components/PageFooter";
import {Layout, message} from "antd";
import './css/App.css'
import RouterConfig from "./router";
import LoginForm from "./components/LoginForm";
import {useEffect, useState} from "react";
import {getUserId, getUserInfoById} from "./api/user";
import {useDispatch} from "react-redux";
import {changeLoginStatus, setUserInfo} from "./store/modules/userStore";

function App() {
    const {Header, Footer, Content} = Layout
    const [isModalOpen, setIsModalOpen] = useState(false);
    const dispatch = useDispatch()
    useEffect(() => {
        const getInfo = async () => {
            const res = await getUserId();
            if (res.data.data) {
                const response = await getUserInfoById()
                dispatch(setUserInfo(response.data.data))
                dispatch(changeLoginStatus(true))
            } else {
                message.error(res.data.msg)
                localStorage.removeItem('userToken')
            }
        }
        if (localStorage.getItem('userToken')) {
            getInfo();
        }
    }, [localStorage.getItem('userToken')]);
    const closeModal = () => {
        setIsModalOpen(false)
    }
    const handleLogin = () => {
        setIsModalOpen(true)
    }
    return (
        <div className="App">
            <Layout>
                {/*头部*/}
                <Header style={{position: "fixed", width: "100%", zIndex: '999'}}><NavHeader handleLogin={handleLogin}/></Header>
                {/*主体区*/}
                <Content className="content">
                    {/*配置页面动态路由*/}
                    <RouterConfig/>
                </Content>
                {/*底部*/}
                <Footer><PageFooter/></Footer>
            </Layout>
            {/*登录弹窗*/}
            <LoginForm isShow={isModalOpen} closeModal={closeModal}/>
        </div>
    );
}

export default App;
